<template>
	<view class="container">
		<view style="position: relative; top: 0; left: 0; width: 100%; height: 100%">
			<image src="../../static/myimg/invitebgc.png" style="width: 100%; height: 100%" mode=""></image>
			<view class="box">
				<image :src="img_url + qrcode" style="width: 380rpx; height: 380rpx" mode=""></image>
				<view style="
            width: 472rpx;
            height: 80rpx;
            background: #ffeb3b;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 48rpx;
          ">
					<view style="padding-left: 28rpx">邀请码：{{ text }}</view>
					<view
						style="width: 152rpx; height: 68rpx; background: #ff8d1a; border-radius: 40rpx 40rpx 40rpx 40rpx; text-align: center; line-height: 68rpx; margin-right: 6rpx"
						@click="clone">
						复制
					</view>
				</view>
			</view>
			<view style="
          position: absolute;
          bottom: 200rpx;
          left: 70rpx;
          width: 610rpx;
          height: 92rpx;
          background: #ff8d1a;
          box-shadow: 0rpx 6rpx 12rpx 2rpx #ff8d1a;
          border-radius: 46rpx 46rpx 46rpx 46rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #151515;
          text-align: center;
          line-height: 92rpx;
        " @click="saveImage">
				保存图片
			</view>
		</view>
	</view>
</template>

<script>
	import {
		qrcodeUser
	} from '@/utils/my.js';
	export default {
		data() {
			return {
				img_url: 'https://wndz.dev.jiangkukeji.cn',
				qrcode: '',
				imagePath: `https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000`, //要保存的图片
				text: 'kydj130'
			};
		},
		async onShow() {
			this.getqrcode();
			const res = await qrcodeUser();
			console.log(res);
			this.qrcode = res.data.mini_qrcode;
		},
		methods: {
			// 获取邀请码
			async getqrcode() {
				const res = await this.http('/user/qrcodeUser');
				console.log('二维码', res);
			},
			saveImage() {
				let imagePath = this.img_url + this.qrcode;
				// 检查保存图片到相册权限已打开
				uni.getSetting({
					success(res) {
						uni.downloadFile({
							url: imagePath,
							success(data) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success() {
											// 用户已授权，可以调用保存图片到相册的功能
											uni.showToast({
												title: '权限已打开',
												icon: 'none'
											});
											// this.saveimgtoAlbum(this.imagePath);
											//图片保存到本地
											let that = this;
											uni.showLoading();
											uni.saveImageToPhotosAlbum({
												filePath: data.tempFilePath,
												success: function(data) {
													uni.hideLoading();
													uni.showToast({
														title: '保存成功',
														icon: 'success',
														duration: 2000
													});
													uni.previewImage({
														urls: [data
															.tempFilePath
														]
													});
												},
												fail: function(err) {
													uni.hideLoading();
													if (err.errMsg ===
														'saveImageToPhotosAlbum:fail auth deny'
														) {
														uni.openSetting({
															success(
																settingdata) {
																if (settingdata
																	.authSetting[
																		'scope.writePhotosAlbum'
																		]) {
																	uni.showToast({
																		title: '您已授权成功，请重新保存海报',
																		icon: 'success',
																		duration: 2000
																	});
																} else {
																	uni.showToast({
																		title: '尚未授权，无法保存海报',
																		icon: 'none',
																		duration: 2000
																	});
																}
															}
														});
													}
												},
												complete(res) {
													console.log(res);
												}
											});
										},
										fail() {
											// 用户拒绝授权，可以提示用户需要授权才能使用该功能
											uni.showToast({
												title: '需要授权才能保存图片到相册',
												icon: 'none'
											});
										}
									});
								} else {
									// 已经授权，直接调用保存图片到相册的功能
									uni.showToast({
										title: '权限已打开, 直接调用',
										icon: 'none'
									});
									// this.saveimgtoAlbum(data.tempFilePath);
									console.log(data.tempFilePath);
									let that = this;
									uni.showLoading();
									uni.saveImageToPhotosAlbum({
										filePath: data.tempFilePath,
										success: function(data) {
											uni.hideLoading();
											uni.showToast({
												title: '保存成功',
												icon: 'success',
												duration: 2000
											});
											uni.previewImage({
												urls: [data.tempFilePath]
											});
										},
										fail: function(err) {
											console.log('保存失败-----------------', err);
											uni.showToast({
												title: '保存失败',
												icon: 'none'
											});
											uni.hideLoading();
											if (err.errMsg ===
												'saveImageToPhotosAlbum:fail auth deny') {
												uni.openSetting({
													success(settingdata) {
														if (settingdata.authSetting[
																'scope.writePhotosAlbum'
																]) {
															uni.showToast({
																title: '您已授权成功，请重新保存海报',
																icon: 'success',
																duration: 2000
															});
														} else {
															uni.showToast({
																title: '尚未授权，无法保存海报',
																icon: 'none',
																duration: 2000
															});
														}
													}
												});
											}
										},
										complete(res) {
											console.log(res);
										}
									});
								}
							}
						});
					}
				});
			},

			clone() {
				uni.setClipboardData({
					data: this.text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
						console.log('复制失败原因:', err);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.box {
			box-sizing: border-box;
			position: absolute;
			top: 300rpx;
			left: calc(50% - 275rpx);
			z-index: 99;
			width: 560rpx;
			height: 600rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
</style>